<template>
  <el-row :gutter="10">
    <el-col :span="5">
        <div style="height: 100%;">
          <el-card >
            <el-scrollbar max-height="500px">
              <OrgTree authority @node-click="handleOrgClick" />
            </el-scrollbar>
          </el-card>
          <el-card style="max-height: 50%">
            <el-space>
              <el-space>
                <el-button v-auth="'gps:device:save'" icon="Plus" type="primary" @click="groupingHandle"
                >添加分组</el-button
                >
              </el-space>
              <el-space>
                <el-button v-auth="'gps:device:delete'" plain type="primary" @click="allEquipment">全部设备</el-button>
              </el-space>
            </el-space>
            <el-table
             
                v-loading="state.dataListLoading"
                :data="groupingList"
                border
                @row-click="grouping"
                class="layout-table"
                max-height="200px"
                @selection-change="selectionChangeHandle">
              <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
              <el-table-column prop="name" label="分组" header-align="center" align="center"></el-table-column>
              <el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
                <template #default="scope">
                  <el-button v-auth="'gps:device:update'" type="primary" link @click="groupingHandle(scope.row)"
                  >修改</el-button
                  >
                  <el-button v-auth="'gps:device:delete'" type="primary" link @click="groupDeletion(scope.row.id)"
                  >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
    </el-col>
    <el-col :span="19">
      <el-card class="layout-query">
        <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
          <el-form-item prop="imei">
            <el-input v-model="state.queryForm.imei" placeholder="设备imei号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card>
        <el-space>
          <el-space>
            <el-button v-auth="'gps:device:save'" icon="Plus" type="primary" @click="addOrUpdateHandle('undefined','新增')"
              >新增</el-button
            >
          </el-space>
          <!--          <el-space>-->
          <!--            <el-button v-auth="'gps:device:delete'" icon="Delete" plain type="danger" @click="deleteBatchHandle()">批量删除</el-button>-->
          <!--          </el-space>-->
          <el-space>
            <el-button icon="Plus" type="primary" @click="bulkTransfers()">批量转移</el-button>
          </el-space>
<!--          <el-space>-->
<!--            <el-button  icon="Plus" type="primary" @click="dialog()">过期设备充值</el-button>-->
<!--          </el-space>-->
<!--          <el-space>-->
<!--            <el-button icon="Plus" type="primary" @click="dialog()">SIM充值</el-button>-->
<!--          </el-space>-->
<!--          <el-space>-->
<!--            <el-button v-auth="'biz:car:save'" icon="Plus" type="primary" @click="disposition()" v-if="userStore.user.superAdmin===1">设备年费配置</el-button>-->
<!--          </el-space>-->
        </el-space>
        <el-table
          v-loading="state.dataListLoading"
          :data="state.dataList"
          border
          class="layout-table"
          @selection-change="selectionChangeHandle">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="plateNo" label="设备名称" header-align="center" align="center"></el-table-column>
          <el-table-column prop="imei" label="设备序号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="devNo" label="自定义编号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="protocol" label="通信协议" header-align="center" align="center"></el-table-column>
          <el-table-column prop="crtTime" label="添加时间" header-align="center" align="center"></el-table-column>
          <el-table-column
            prop="platformEndDate"
            label="平台到期时间"
            header-align="center"
            align="center"></el-table-column>
          <el-table-column prop="simEndDate" label="Sim到期时间" header-align="center" align="center"></el-table-column>
          <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
            <template #default="scope">
              <el-button v-auth="'gps:device:update'" type="primary" link @click="addOrUpdateHandle(scope.row.imei,'修改')"
                >修改</el-button
              >
              <el-button v-auth="'gps:device:delete'" type="primary" link @click="deleteBatchHandle(scope.row.imei)"
                >删除</el-button
              >
              <!--              <el-button-->
              <!--                  v-auth="'gps:device:delete'"-->
              <!--                  type="primary"-->
              <!--                  link-->
              <!--                  @click="deleteBatchHandle(scope.row.imei)"-->
              <!--              >跟踪</el-button-->
              <!--              >-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="state.page"
          :page-sizes="state.pageSizes"
          :page-size="state.limit"
          :total="state.total"
          layout="total, sizes, prev, pager, next"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle">
        </el-pagination>

        <!-- 弹窗, 新增 / 修改 -->
<!--        <add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>-->
        <add-or-transfer ref="addOrTransferRef" @refresh-data-list="getDataList"></add-or-transfer>
        <add-or-grouping ref="addOGroupingRef" @refresh-data-list="getlistGrouping"></add-or-grouping>

      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import {reactive, ref, markRaw, h} from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrTransfer from '@/views/gps/device/add-or-transfer.vue'
import { deleteGrouping, getlistGroupingApi } from '@/api/gps/device'
import AddOrGrouping from '@/views/gps/device/add-or-grouping.vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import OrgTree from "@/views/sys/user/org-tree.vue";
import {createPopup} from "@/utils/gps/createPopup";
const userStore = useUserStore()
import AddOrUpdate from '@/components/deviceInformation/index.vue'
const state: IHooksOptions = reactive({
  dataListUrl: 'gps/device/listPage',
  deleteUrl: '/gps/device',
  newParams: true,
  queryForm: {
    imei: '',
    companyId: undefined,
    deptId: '',
    groupId: ''
  }
})

const addOrUpdateRef = ref()
const addOrTransferRef = ref()
const addOGroupingRef = ref()
const initRef = ref()
const imeiObject = reactive({
  goodsId:"plat_0002",
  imeis:[]
})
const visible = ref(false)
const queryRef = ref()
// const subassembly = ref<any>(markRaw(PlatformTopUpList))
const groupingList = ref()
// const way = ref(next)
const addOrUpdateHandle = (imei?: string, name?: string) => {
    createPopup(
        {
          default: (close) =>
              h(AddOrUpdate, {
                imei: String(imei),
                name: String(name),
                onClose: close
              })
        },
        {
          title: name
        }
    )
}
const bulkTransfers = () => {
  addOrTransferRef.value.init()
}
const groupingHandle = (id?: string) => {
  addOGroupingRef.value.init(id)
}

const handleOrgClick = (orgId: any) => {
  state.queryForm.groupId = ''
  state.queryForm.deptId = orgId
  // getDataList()
  getlistGrouping()
}


//获取分组列表
function getlistGrouping() {
  // state.queryForm.deptId = state.queryForm.companyId
  getlistGroupingApi(state.queryForm.deptId).then((ref) => {
    groupingList.value = ref.data
    getDataList()
  })
}

function grouping(row) {
  state.queryForm.groupId = row.id
  getDataList()
}


const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, reset } =
  useCrud(state)

//获取分组列表
//分组删除
function groupDeletion(id) {
  deleteGrouping(id).then(() => {
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: () => {
        getlistGrouping()
      }
    })
  })
}
function allEquipment() {
  groupingList.value = []
  getDataList()
}
</script>
